﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>用户中心</title>
<link rel="stylesheet" href="css/nxyt.css" type="text/css"/>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet" />
<link title="" href="css/style1.css" rel="stylesheet" type="text/css"  />
<link title="blue" href="css/dermadefault.css" rel="stylesheet" type="text/css"/>
<link title="green" href="css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled"/>
<link title="orange" href="css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled"/>
<link href="css/templatecss.css" rel="stylesheet" title="" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css"/>

<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="script/jquery.cookie.js" type="text/javascript"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="script/jquery.datetimepicker.full.js"></script>
</head>

<body>
<nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
  <div class="navbar-header">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
      <ul class="navbar-brand">
        <li>
          <img  style="margin-right: 10px" src="img/logo.png" alt="">
          <span style="color:white;">农险云图业务管理系统</span>
        </li>
      </ul>

  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav pull-right">
      <li class="dropdown li-border"><a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown"><img  style="border-radius: 80px;width: 20px;height: 20px;margin-right: 5px" src="img/avatar3.jpg" alt="">3645621@qq.com<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">退出</a></li>
        </ul>
      </li>
      <li class="dropdown"><a href="#" style="height: 51px" class="dropdown-toggle mystyle-color" data-toggle="dropdown">换肤<span class="caret"></span></a>
        <ul class="dropdown-menu changecolor">
          <li id="blue"><a href="#">绿色</a></li>
          <li class="divider"></li>
          <li id="green"><a href="#">蓝色</a></li>
          <li class="divider"></li>
          <li id="orange"><a href="#">橙色</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
<div class="down-main">
  <div class="left-main left-full">
    <div class="sidebar-fold"><span class="glyphicon glyphicon-menu-hamburger"></span></div>
    <div class="subNavBox">

      <div class="sBox">
        <div class="subNav sublist-up"><span class="title-icon glyphicon glyphicon-chevron-down"></span><span class="sublist-title">数据分析</span></div>
        <ul class="navContent" style="display:block">
          <li class="active">
            <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />汇总分析</div>
            <a href="index.html"><span class="sublist-icon glyphicon glyphicon-asterisk"></span><span class="sub-title">汇总分析</span></a></li>
          <li>
            <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />用户分析</div>
            <a href="user_analysis.html"><span class="sublist-icon glyphicon glyphicon-indent-right"></span><span class="sub-title">用户分析</span></a></li>
          <li>
            <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />留存分析</div>
            <a href="user_retention_analysis.html"><span class="sublist-icon glyphicon glyphicon-print"></span><span class="sub-title">留存分析</span></a></li>
          <li>
            <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />业务分析</div>
            <a href="business_analysis.html"><span class="sublist-icon glyphicon glyphicon-road glyphicon glyphicon-user"></span><span class="sub-title">业务分析</span></a></li>
          <li>
                <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />清单分析-种植</div>
                <a href="Detailed_list_analysis_zhong.html"><span class="sublist-icon glyphicon glyphicon-tasks"></span><span class="sub-title">清单分析</span></a></li>
           <li>
                <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />清单分析-养殖</div>
                <a href="Detailed_list_analysis_yang.html"><span class="sublist-icon glyphicon glyphicon-send"></span><span class="sub-title">清单分析</span></a></li>
          <li>
                <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />地图分析</div>
                <a href="map_analysis.html"><span class="sublist-icon glyphicon glyphicon-th"></span><span class="sub-title">地图分析</span></a></li>
          <li>
                <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />影像分析</div>
                <a href="image_analysis.html"><span class="sublist-icon glyphicon glyphicon-magnet"></span><span class="sub-title">影像分析</span></a></li>

        </ul>
      </div>
    </div>
  </div>
  <div class="right-product my-index right-full">
     <div class="container-fluid">
                   <ol class="breadcrumb">
                      <li><a href="#">运营管理系统</a></li>
                      <li class="active">汇总分析</li>
                    </ol>
                   <div class="row sw-plooed">
                     <div class="col-xs-6  col-lg-4">
                       <div class="view">
                            <p class="num c1">12445</p>
                            <p class="label">用户数量</p>
                        </div>
                     </div> 
                     <div class="col-xs-6  col-lg-4">
                        <div class="view">
                               <p class="num c2">12445</p>
                                <p class="label">分户清单数量</p>
                        </div>
                     </div> 
                      <div class="col-xs-6  col-lg-4">
                           <div class="view">
                               <p class="num c3">25%</p>
                                <p class="label">七日留存</p>
                           </div>
                       </div>
                       <div class="col-xs-6  col-lg-4">
                           <div class="view">
                              <p class="num c4">12445</p>
                                <p class="label">采集任务数量</p>
                           </div>
                       </div>
                       <div class="col-xs-6  col-lg-4">
                           <div class="view">
                               <p class="num c5">12156</p>
                               <p class="label">地图地块数量</p>
                           </div>
                       </div>
                       <div class="col-xs-6  col-lg-4">
                           <div class="view">
                               <p class="num c6">12445</p>
                                <p class="label">影像照片数量</p>
                           </div>
                       </div>
                   </div>
               </div>
              </div>
       </div>			
	 </div>
  </div>
</div>

<script type="text/javascript">
     $("li").click(function () {
            $(this).toggleClass("selected");
            if ($(this).hasClass("selected")) {
                var img = $(this).children("span").children("img");
                img.css('display', 'inline');
            }else {
                var img = $(this).children("span").children("img");
                img.css('display', 'none');
            }
        });
     //下拉
     document.getElementById("index-company").style.height = '30px';
     document.getElementById("index-province").style.height = '30px';
     document.getElementById("index-business").style.height = '30px';
     document.getElementById("index-insurance").style.height = '30px';
    function select_item(x,y) {
        var btn1 = document.getElementById(x);
        if (btn1.style.height == '30px') {  //展开
            btn1.style.height = 'auto';
            btn1.style.overflow = 'visible';
            btn1.style.border = '1px solid #dcdcdc';
        } else { //关闭
            btn1.style.height = '30px';
            btn1.style.overflow = 'hidden';
            btn1.style.border = 'none';
        }
        //将checkbox设为可见
        if ($(y).hasClass("display-yes")) {
            $(y).removeClass("display-yes");
        } else {
            $(y).addClass("display-yes");
        }
    }
    //获取checkbox的值
    function chk() {
        var obj = document.getElementsByName('check'); //选择所有name="'check'"的对象，返回数组,取到对象数组后，我们来循环检测它是不是被选中
        var s = '';
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked) s += obj[i].value + ','; //如果选中，将value添加到变量s中
        }
        console.log(s);
    }
    //取消按钮
    function reset(x,y) {
        var btn2 = document.getElementById(x);
        btn2.style.height = '30px';
        btn2.style.overflow = 'hidden';
        btn2.style.border = 'none';
        $(y).removeClass("display-yes");
    }
</script>
<script type="text/javascript">
    $(function(){
/*换肤*/
$(".dropdown .changecolor li").click(function(){
	var style = $(this).attr("id");
    $("link[title!='']").attr("disabled","disabled"); 
	$("link[title='"+style+"']").removeAttr("disabled"); 

	$.cookie('mystyle', style, { expires: 7 }); // 存储一个带7天期限的 cookie 
})
var cookie_style = $.cookie("mystyle"); 
if(cookie_style!=null){ 
    $("link[title!='']").attr("disabled","disabled"); 
	$("link[title='"+cookie_style+"']").removeAttr("disabled"); 
}


/*左侧导航栏显示隐藏功能*/
$(".subNav").click(function(){				
			/*显示*/
			if($(this).find("span:first-child").attr('class')=="title-icon glyphicon glyphicon-chevron-down")
			{
				$(this).find("span:first-child").removeClass("glyphicon-chevron-down");
			    $(this).find("span:first-child").addClass("glyphicon-chevron-up");
			    $(this).removeClass("sublist-down");
				$(this).addClass("sublist-up");
			}
			/*隐藏*/
			else
			{
				$(this).find("span:first-child").removeClass("glyphicon-chevron-up");
				$(this).find("span:first-child").addClass("glyphicon-chevron-down");
				$(this).removeClass("sublist-up");
				$(this).addClass("sublist-down");
			}	
		// 修改数字控制速度， slideUp(500)控制卷起速度
	    $(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(300);
	})
/*左侧导航栏缩进功能*/
$(".left-main .sidebar-fold").click(function(){

	if($(this).parent().attr('class')=="left-main left-full")
	{
		$(this).parent().removeClass("left-full");
		$(this).parent().addClass("left-off");
		
		$(this).parent().parent().find(".right-product").removeClass("right-full");
		$(this).parent().parent().find(".right-product").addClass("right-off");
		
		}
	else
	{
		$(this).parent().removeClass("left-off");
		$(this).parent().addClass("left-full");
		
		$(this).parent().parent().find(".right-product").removeClass("right-off");
		$(this).parent().parent().find(".right-product").addClass("right-full");
		
		}
	});
 
  /*左侧鼠标移入提示功能*/
		$(".sBox ul li").mouseenter(function(){
			if($(this).find("span:last-child").css("display")=="none")
			{$(this).find("div").show();}
			}).mouseleave(function(){$(this).find("div").hide();})	
})

</script>
<script>
    //日期组件js
    $.datetimepicker.setLocale('en');

    $('#datetimepicker_format').datetimepicker({value:'2015/04/15 05:03', format: $("#datetimepicker_format_value").val()});
    console.log($('#datetimepicker_format').datetimepicker('getValue'));

    $("#datetimepicker_format_change").on("click", function(e){
        $("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({format: $("#datetimepicker_format_value").val()});
    });
    $("#datetimepicker_format_locale").on("change", function(e){
        $.datetimepicker.setLocale($(e.currentTarget).val());
    });

    $('#datetimepicker').datetimepicker({
        dayOfWeekStart : 1,
        lang:'en',
        disabledDates:['1986/01/08','1986/01/09','1986/01/10'],
        startDate:	'1986/01/05'
    });
    $('#datetimepicker').datetimepicker({value:'2015/04/15 05:03',step:10});

    $('.some_class').datetimepicker();

    $('#default_datetimepicker').datetimepicker({
        formatTime:'H:i',
        formatDate:'d.m.Y',
        //defaultDate:'8.12.1986', // it's my birthday
        defaultDate:'+03.01.1970', // it's my birthday
        defaultTime:'10:00',
        timepickerScrollbar:false
    });

    $('#datetimepicker10').datetimepicker({
        step:5,
        inline:true
    });
    $('#datetimepicker_mask').datetimepicker({
        mask:'9999/19/39 29:59'
    });

    $('#datetimepicker1').datetimepicker({
        datepicker:false,
        format:'H:i',
        step:5
    });
    $('#datetimepicker2').datetimepicker({
        yearOffset:222,
        lang:'ch',
        timepicker:false,
        format:'d/m/Y',
        formatDate:'Y/m/d',
        minDate:'-1970/01/02', // yesterday is minimum date
        maxDate:'+1970/01/02' // and tommorow is maximum date calendar
    });
    $('#datetimepicker3').datetimepicker({
        inline:true
    });
    $('#datetimepicker4').datetimepicker();
    $('#open').click(function(){
        $('#datetimepicker4').datetimepicker('show');
    });
    $('#close').click(function(){
        $('#datetimepicker4').datetimepicker('hide');
    });
    $('#reset').click(function(){
        $('#datetimepicker4').datetimepicker('reset');
    });
    $('#datetimepicker5').datetimepicker({
        datepicker:false,
        allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00'],
        step:5
    });
    $('#datetimepicker6').datetimepicker();
    $('#destroy').click(function(){
        if( $('#datetimepicker6').data('xdsoft_datetimepicker') ){
            $('#datetimepicker6').datetimepicker('destroy');
            this.value = 'create';
        }else{
            $('#datetimepicker6').datetimepicker();
            this.value = 'destroy';
        }
    });
    var logic = function( currentDateTime ){
        if (currentDateTime && currentDateTime.getDay() == 6){
            this.setOptions({
                minTime:'11:00'
            });
        }else
            this.setOptions({
                minTime:'8:00'
            });
    };
    $('#datetimepicker7').datetimepicker({
        onChangeDateTime:logic,
        onShow:logic
    });
    $('#datetimepicker8').datetimepicker({
        onGenerate:function( ct ){
            $(this).find('.xdsoft_date')
                    .toggleClass('xdsoft_disabled');
        },
        minDate:'-1970/01/2',
        maxDate:'+1970/01/2',
        timepicker:false
    });
    $('#datetimepicker9').datetimepicker({
        onGenerate:function( ct ){
            $(this).find('.xdsoft_date.xdsoft_weekend')
                    .addClass('xdsoft_disabled');
        },
        weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
        timepicker:false
    });
    var dateToDisable = new Date();
    dateToDisable.setDate(dateToDisable.getDate() + 2);
    $('#datetimepicker11').datetimepicker({
        beforeShowDay: function(date) {
            if (date.getMonth() == dateToDisable.getMonth() && date.getDate() == dateToDisable.getDate()) {
                return [false, ""]
            }

            return [true, ""];
        }
    });
    $('#datetimepicker12').datetimepicker({
        beforeShowDay: function(date) {
            if (date.getMonth() == dateToDisable.getMonth() && date.getDate() == dateToDisable.getDate()) {
                return [true, "custom-date-style"];
            }

            return [true, ""];
        }
    });
    $('#datetimepicker_dark').datetimepicker({theme:'dark'})
</script>
</body>
</html>
